import React, { useState } from "react";
import { StyleSheet, View, Text, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { categories, difficulties } from "@/mocks/questions";
import { useAppStore } from "@/store/app-store";
import { Category, Difficulty } from "@/types/question";
import { useTheme } from "@/hooks/useTheme";
import Button from "@/components/Button";

export default function SimulateScreen() {
  const router = useRouter();
  const { colors } = useTheme();
  const {
    simulationDuration,
    simulationQuestionsCount,
    selectedCategories,
    selectedDifficulties,
    toggleCategory,
    toggleDifficulty,
  } = useAppStore();
  const [isLoading, setIsLoading] = useState(false);
  const handleStartSimulation = () => {
    setIsLoading(true);
    // Simulate loading
    setTimeout(() => {
      setIsLoading(false);
      router.push("/simulation/start");
    }, 1000);
  };
  const isStartDisabled =
    selectedCategories.length === 0 || selectedDifficulties.length === 0;
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={["bottom"]}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.header}>
          <Text style={[styles.title, { color: colors.text }]}>面试模拟</Text>
          <Text style={[styles.subtitle, { color: colors.subtext }]}>配置你的面试设置</Text>
        </View>
        <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <View style={styles.cardHeader}>
            <Ionicons name="time-outline" size={20} color={colors.primary} />
            <Text style={[styles.cardTitle, { color: colors.text }]}>时长</Text>
          </View>
          <Text style={[styles.cardDescription, { color: colors.subtext }]}>
            面试将持续 {simulationDuration} 分钟
          </Text>
          <View style={styles.durationOptions}>
            {[15, 30, 45, 60].map((duration) => (
              <Button
                key={duration}
                title={`${duration}m`}
                variant={
                  simulationDuration === duration ? "primary" : "outline"
                }
                size="small"
                onPress={() =>
                  useAppStore.setState({ simulationDuration: duration })
                }
              />
            ))}
          </View>
        </View>
        <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <View style={styles.cardHeader}>
            <Ionicons name="help-circle-outline" size={20} color={colors.primary} />
            <Text style={[styles.cardTitle, { color: colors.text }]}>问题</Text>
          </View>
          <Text style={[styles.cardDescription, { color: colors.subtext }]}>
            你将被问到 {simulationQuestionsCount} 个问题
          </Text>
          <View style={styles.durationOptions}>
            {[3, 5, 7, 10].map((count) => (
              <Button
                key={count}
                title={`${count}`}
                variant={
                  simulationQuestionsCount === count ? "primary" : "outline"
                }
                size="small"
                onPress={() =>
                  useAppStore.setState({ simulationQuestionsCount: count })
                }
              />
            ))}
          </View>
        </View>
        <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <View style={styles.cardHeader}>
            <Ionicons name="options-outline" size={20} color={colors.primary} />
            <Text style={[styles.cardTitle, { color: colors.text }]}>类别</Text>
          </View>
          <Text style={[styles.cardDescription, { color: colors.subtext }]}>
            选择你想要测试的主题
          </Text>
          <View style={styles.chipContainer}>
            {categories.map((category) => (
              <Chip
                key={category.id}
                label={category.name}
                selected={selectedCategories.includes(category.id)}
                onPress={() => toggleCategory(category.id)}
              />
            ))}
          </View>
        </View>
        <View style={[styles.card, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <View style={styles.cardHeader}>
            <Ionicons name="options-outline" size={20} color={colors.primary} />
            <Text style={[styles.cardTitle, { color: colors.text }]}>难度</Text>
          </View>
          <Text style={[styles.cardDescription, { color: colors.subtext }]}>
          选择包含的困难度
          </Text>
          <View style={styles.chipContainer}>
            {difficulties.map((difficulty) => (
              <Chip
                key={difficulty.id}
                label={difficulty.name}
                selected={selectedDifficulties.includes(difficulty.id)}
                onPress={() => toggleDifficulty(difficulty.id)}
                color={difficulty.color}
              />
            ))}
          </View>
        </View>
        <Button
          title="开始模拟面试"
          onPress={handleStartSimulation}
          disabled={isStartDisabled}
          loading={isLoading}
          fullWidth
        />
        <View style={styles.footer} />
      </ScrollView>
    </SafeAreaView>
  );
}

interface ChipProps {
  label: string;
  selected: boolean;
  onPress: () => void;
  color?: string;
}

function Chip({ label, selected, onPress, color }: ChipProps) {
  return (
    <Button
      title={label}
      variant={selected ? "primary" : "outline"}
      size="small"
      onPress={onPress}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  header: {
    marginBottom: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
  },
  card: {
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    borderWidth: 1,
  },
  cardHeader: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginLeft: 8,
  },
  cardDescription: {
    fontSize: 14,
    marginBottom: 16,
  },
  durationOptions: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  chipContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  footer: {
    height: 40,
  },
});
